<template>
  <el-select :value="mValue" :filterable="filterable" :multiple="multiple" :placeholder="placeholder" :disabled="disabled" @input="onInput">
    <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label" />
  </el-select>
</template>

<script>
import formMixin from '@/components/formMixin'
export default {
  name: 'OsSelect',
  mixins: [formMixin],
  props: {
    multiple: Boolean,
    filterable: { type: Boolean, default: false }
  },
  data () {
    return {
      options: [],
      delValue: []
    }
  },
  computed: {
    mValue () {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.delValue = []
      return this.value.filter(item => {
        const re = this.options.some(item2 => item === item2.value)
        if (!re) {
          this.delValue.push(item)
        }
        return re
      })
    }
  },
  watch: {
    'fApi.rule': {
      handler (val) {
        this.updateOptions(val)
      },
      deep: true
    }
  },
  methods: {
    updateOptions (rules) {
      // const rule = rules.find(r => r.field === this.field)
      const rule = rules.find(r => r.field === this.name) // this.field 被加密，取值已转换为字符串
      if (rule && rule.options) {
        this.options = rule.options
      }
    },
    onInput (val) {
      this.$emit('input', [...val, ...this.delValue])
    }
  }
}
</script>

<style scoped>
</style>
